<template>
	<view class="wrap">
		<view class="logo-wrap">
			<view class="logo-inner">
				<image src="/static/logo.png" mode="widthFix"></image>
				<view>理疗会员管理系统</view>
			</view>
		</view>
		<view class="form-container">
			<form>
				<view class="cu-form-group">
					<view class="title">用户名</view>
					<input placeholder="请输入用户名" name="username" v-model="user.name"></input>
				</view>
				<view class="cu-form-group">
					<view class="title">密&nbsp;&nbsp;&nbsp;&nbsp;码</view>
					<input placeholder="请输入密码" type="password" name="username" v-model="user.password"></input>
				</view>
				<view class="padding"><view class="cuIcon-like">{{msg}}</view></view>
				<view class="padding flex flex-direction btn-box">
					<button class="cu-btn round bg-red margin-tb-sm lg" @tap="login">登录</button>
				</view>
			</form>
			
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				needShow: false,
				user:{
					name:'',
					password:''
				},
				serverInfo:{
					ip:'',
					port:''
				},
				serverInfoCached:true,
				msg:'提示信息'
			}
		},
		onLoad() {
			
		},
		mounted(){
			
			
		},
		methods: {
			login(){
				if(this.user.name.trim().length==0){
					uni.showToast({
						title:"账号不能为空",
						icon:'error'
					})
					return false;
				}
				if(this.user.password.trim().length==0){
					uni.showToast({
						title:"密码不能为空",
						icon:'error'
					})
					return false;
				}
				let that = this;
				this.$api.req.submitLogin(this.user,res=>{
						console.log(res)
					if(res.code===0){
						uni.setStorageSync("userInfo",JSON.stringify(res.userInfo));
						setTimeout(function(){
							uni.reLaunch({
								url: '/pages/home/index'
							},500);
						})
						
					}else{
						that.msg = res.msg;
					}
				})
				
			},
			hideModal(){
				this.needShow = false;
			},
			showModal(){
				this.needShow = true;
			},
			setServer(){
				this.needShow = true;
			},
			cacheServerInfo(){
				if(!this.serverInfo.ip){
					uni.showToast({
						title:"IP不能为空",
						icon:'error'
					})
				}else{
					uni.showToast({
						title:"设置成功"
					})
					uni.setStorageSync("SERVERINFO",JSON.stringify(this.serverInfo));
					this.hideModal();
				}
			}
		}
	}
</script>

<style lang="scss">
	html{
		background-color: #fff;
	}
	.wrap{
		background-color: #F7F2F2;
	}
	.logo-wrap{
		padding: 100upx 0;
		font-size: 45upx;
		font-weight: bold;
		color: #F2EAEA;
		display: flex;
		background-color: #000;
		.logo-inner{
			
		}
		image{
			width: 300upx;
		}
		justify-content: center;
		align-items: center;
	}
	form .cu-form-group{
		margin-top:30upx;
		margin-left: 32upx;
		margin-right: 32upx;
	}
	.form-container{
		
		margin-top:100upx;
		text-align: center;
		
		.login-btn{
			margin-top: 30upx;
		}
		.btn-box{
			margin-top: 70upx;
		}
	}
	input{
		text-align: left;
	}
	.login-btn {
		color: #ffffff;
		font-size: 32rpx;
		width: 80%;
		height: 90rpx;
		border-radius: 10rpx;
		line-height: 90rpx;
		text-align: center;
		margin: 24rpx auto 0;
		background: linear-gradient(303deg, #4371FF 0%, #B4A5FF 100%);
		border-radius: 100upx;
	
		&.settig-btn {
			background: #F6F6F6;
			color: #999999
		}
	}
</style>
